.blog-container {
	width: calc(100% - 200px); // 兼容 IE 10
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
.blog-list-container {
	flex-grow: 1;
	display: flex;
	overflow-y: auto; // 本来只在 issue-list 上添加 overflow-y: auto 就可以的，在 blog-list-container 里也添加 overflow-y: auto 是为了兼容 Firefox 和 Android
	flex-direction: column;
}
//标签
.label-list {
	list-style: none;
	flex-shrink: 0;
	padding: 20px 26px 0px 50px;
	display: flex;
	flex-wrap: wrap;
	li {
		margin-bottom: 20px;
		margin-right: 10px;
	}
}

.tag-unchecked {
	background-color: #f2f5f8;
	color: #849aa4;
}
//blog列表
.table-header {
	flex: 0 0 48px;
	display: flex;
	align-items: center;
	background-color: #f9fafc;
	padding: 0px 70px;
	border-top: 1px solid #eeeeee;
	border-bottom: 1px solid #eeeeee;
	font-size: 12px;
	color: #a3b4bc;
	:first-child {
		flex-grow: 1;
	}
	:last-child {
		flex: 0 0 7rem;
		text-align: right;
	}
}
.issue-list {
	flex-grow: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	list-style: none;
	.issue-item {
		flex: 0 0 69px;
		border-bottom: solid 1px #eeeeee;
		display: flex;
		align-items: center;
		padding: 0px 70px;
		a {
			font-size: 15px;
			color: #4b595f;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		a:hover {
			color: #3593f2;
		}
		ul {
			display: flex;
			flex: 1 0 auto;
			margin: 0 30px;
			list-style: none;
		}
		.time {
			font-size: .6rem;
			color: #999999;
			cursor: default;
			flex: 0 0 7rem;
			text-align: right;
		}
	}
}
//底部
.bottom-bar {
    flex: 0 0 69px;
    padding: 0px $margin;
    border-top: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    .query {
		flex-grow: 1;
		height: 16px;
		border-radius: 3px;
		padding: 15px 30px 15px 15px;
		border: solid 1px #eeeeee;
		font-size: 14px;
		color: #4b595f;
		margin-right: 20px;
		outline: none;
		background: #f9fafc url("../assets/enter-icon.svg") no-repeat calc(100% - 10px) center;
    }

    .query::placeholder {
		color: #849aa4;
    }
}

//blog 详情
.blog-detail-container {
    flex-grow: 1;
    display: flex;
    overflow-y: auto; // 本来只在 comment-container 上添加 overflow-y: auto 就可以的，在 blog-detail-container 里也添加 overflow-y: auto 是为了兼容 Firefox 和 Android
    flex-direction: column;
}
.title-container {
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    background-color: #f9fafc;
    padding: 0px $margin;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    .title {
		font-size: 22px;
		color: #4b595f;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
    }
    ul {
		list-style: none;
		display: flex;
		flex: 1 0 auto;
		margin: 0 .5rem;
    }
    .back {
		flex: 0 0 65px;
		font-size: 14px;
		color: #4b595f;
		cursor: pointer;
		img {
			display: inline-block;
			margin-right: 10px;
			width: 18px;
			height: 12px;
			object-fit: contain;
		}
    }
}
.comment-container {
	flex-grow: 1;
	overflow-y: auto;
	padding: 0px $margin;
}
.comment {
    margin-top: 30px;
    border-radius: 4px;
    border: solid 1px #eeeeee;
}
.comment-title {
	height: 48px;
	line-height: 48px;
	background-color: #f9fafc;
	border-bottom: solid 1px #eeeeee;
	padding: 0px 30px;
	div {
		cursor: pointer;
		float: left;
		img {
			float: left;
			width: 30px;
			height: 30px;
			margin-top: 9px;
			border-radius: 15px;
			margin-right: 12px;
		}
		span {
			font-size: 14px;
			color: #4b595f;
		}
	}
	.time {
		float: right;
		margin-right: 20px;
		font-size: 12px;
		color: #849aa4;
	}
}

.comment-body {
	padding: 15px;
	font-size: 14px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .blog-container{ width: 100%; }
  .label-list{
  	padding: $margin;
  }
  .table-header{
  	padding: 0 $margin;
  }
  .issue-list {
  	.issue-item{
  		padding: 0 $margin;
  		ul{
  			margin: 0 .5rem;
  		}
  	}
  } 
  .bottom-bar .query { display: none; }
  .comment-title{ padding: 0px $margin;}
}